<i18n locale="en" lang="yaml">
codeExample: |-
  # Export function as an HTTP API
  @DFF.API('API Name')
  def hello_world():
      # Query data from connector
      db = DFF.CONN('db')
      db.query('SELECT * FROM table LIMIT 3', database='my_database')

      # Get environment variable
      company_name = DFF.ENV('my_env')

      # Print logs
      DFF.log('Hello, world!')
      print('Hello, world')

      # Return data
      ret = {
        'msg': 'Hello, world'
      }
      return ret
</i18n>

<i18n locale="zh-CN" lang="yaml">
Welcome: 欢迎

Before you start, please read the following: 在开始之前，请阅读以下内容

Left Sidebar: 编辑器左侧栏
'In the left sidebar you can find the core module entrance of the Editor:' : 在左边侧栏可以找到编辑器的核心模块入口：
Edit and manage Script Sets and Scripts                                    : 进行脚本集和脚本的编辑和管理
Manage the various external systems available within the Script            : 管理脚本内可用的各外部系统
Manage the environment variables available within the Script               : 管理脚本内可用的环境变量

Every tab supports quick jumping. Enter ID or name and select it to jump to the item.                          : 每个标签页都支持快速跳转。输入目标 ID 或名称并选择，即可定位到项目。
Information about the item and the actions that can be performed will be displayed after hovering over it.     : 将鼠标悬停在项目上，可展示项目的相关信息以及可进行的操作。
The gray divider between the left sidebar and the editing area can be dragged to adjust the left sidebar width.: 拖动左侧栏与编辑区的灰色分割线，可以调整左侧栏宽度。

Built-in Features: 内置功能
Some built-in objects are pre-injected into the context of the Script and can be accessed directly without importing. : 脚本的上下文环境预先注入了一些内置对象，无需导入即可直接使用。
codeExample: |-
  # 定义函数为 API 接口
  @DFF.API('API 名称')
  def hello_world():
      # 从连接器查询数据
      db = DFF.CONN('db')
      db.query('SELECT * FROM table LIMIT 3', database='my_database')

      # 使用环境变量
      company_name = DFF.ENV('my_env')

      # 日志输出
      DFF.log('Hello, world!')
      print('Hello, world')

      # 数据返回
      ret = {
        'msg': 'Hello, world'
      }
      return ret

Code Editor: 代码编辑器
Select the Script in the left sidebar to enter the Code Editor.        : 在左边侧栏中选择脚本进入此脚本的代码编辑器
'The common shortcuts for the Code Editor are similar to Sublime Text:': 代码编辑器的基本快捷键与 Sublime Text 类似：
Prompt when typing                  : 键入时提示
Auto-completion                     : 自动补全
Toggle comments                     : 注释/取消注释
Add selection to next find match    : 将下一个查找匹配项添加到选择
When no characters are selected     : 未选中字符时
Cut whole line                      : 剪切整行
Copy whole line                     : 复制整行
Indent lines                        : 增加行缩进
Outdent lines                       : 减少行缩进
When multiple lines are selected    : 选中多行时
When the focus is in the Code Editor: 焦点在编辑器内时
Open search bar                     : 打开搜索栏

Features built on the Script are located in the management page.: 建立在脚本之上的各项功能位于管理页面。
Usage overview                                                  : 使用概况
System version and status                                       : 系统版本和状态
API authentication for Sync and Async APIs                      : 用于同步和异步 API 的认证
Allow Python functions be called as synchronous HTTP APIs       : 允许 Python 函数作为同步 HTTP API 调用
Allow Python functions be called as asynchronous HTTP APIs      : 允许 Python 函数作为异步 HTTP API 调用
Calling Python functions at regular intervals                   : 定时调用 Python 函数
Export Script Sets as zip files                                 : 将脚本集导出为 zip 文件
Import Script Sets from zip files                               : 从 zip 文件导入将脚本集
Recover Script Lib to a previous moment                         : 将脚本库恢复到以前的某个时刻
Manage the users who use the system                             : 管理使用本系统的用户
Some customization setting for the system                       : 一些定制化设置
Some key operation records                                      : 一些关键操作记录
Toggling experimental features                                  : 打开 / 关闭实验性功能

Distribute and share code by publishing and installing Script Sets using git repositories, Alibaba Cloud OSS, file services etc.: 使用 git 库、阿里云 OSS、文件服务等进行脚本集的发布、安装，实现代码的分发和共享。
</i18n>

<!-- Generated by OpenCC START -->
<i18n locale="zh-HK" lang="yaml">
API authentication for Sync and Async APIs: 用於同步和異步 API 的認證
Add selection to next find match: 將下一個查找匹配項添加到選擇
Allow Python functions be called as asynchronous HTTP APIs: 允許 Python 函數作為異步 HTTP API 調用
Allow Python functions be called as synchronous HTTP APIs: 允許 Python 函數作為同步 HTTP API 調用
Auto-completion: 自動補全
Before you start, please read the following: 在開始之前，請閲讀以下內容
Built-in Features: 內置功能
Calling Python functions at regular intervals: 定時調用 Python 函數
Code Editor: 代碼編輯器
Copy whole line: 複製整行
Cut whole line: 剪切整行
? Distribute and share code by publishing and installing Script Sets using git repositories, Alibaba Cloud OSS, file services etc.
: 使用 git 庫、阿里雲 OSS、文件服務等進行腳本集的發佈、安裝，實現代碼的分發和共享。
Edit and manage Script Sets and Scripts: 進行腳本集和腳本的編輯和管理
Every tab supports quick jumping. Enter ID or name and select it to jump to the item.: 每個標籤頁都支持快速跳轉。輸入目標 ID 或名稱並選擇，即可定位到項目。
Export Script Sets as zip files: 將腳本集導出為 zip 文件
Features built on the Script are located in the management page.: 建立在腳本之上的各項功能位於管理頁面。
Import Script Sets from zip files: 從 zip 文件導入將腳本集
'In the left sidebar you can find the core module entrance of the Editor:': 在左邊側欄可以找到編輯器的核心模塊入口：
Indent lines: 增加行縮進
Information about the item and the actions that can be performed will be displayed after hovering over it.: 將鼠標懸停在項目上，可展示項目的相關信息以及可進行的操作。
Left Sidebar: 編輯器左側欄
Manage the environment variables available within the Script: 管理腳本內可用的環境變量
Manage the users who use the system: 管理使用本系統的用户
Manage the various external systems available within the Script: 管理腳本內可用的各外部系統
Open search bar: 打開搜索欄
Outdent lines: 減少行縮進
Prompt when typing: 鍵入時提示
Recover Script Lib to a previous moment: 將腳本庫恢復到以前的某個時刻
Select the Script in the left sidebar to enter the Code Editor.: 在左邊側欄中選擇腳本進入此腳本的代碼編輯器
Some built-in objects are pre-injected into the context of the Script and can be accessed directly without importing.: 腳本的上下文環境預先注入了一些內置對象，無需導入即可直接使用。
Some customization setting for the system: 一些定製化設置
Some key operation records: 一些關鍵操作記錄
System version and status: 系統版本和狀態
'The common shortcuts for the Code Editor are similar to Sublime Text:': 代碼編輯器的基本快捷鍵與 Sublime Text 類似：
The gray divider between the left sidebar and the editing area can be dragged to adjust the left sidebar width.: 拖動左側欄與編輯區的灰色分割線，可以調整左側欄寬度。
Toggle comments: 註釋/取消註釋
Toggling experimental features: 打開 / 關閉實驗性功能
Usage overview: 使用概況
Welcome: 歡迎
When multiple lines are selected: 選中多行時
When no characters are selected: 未選中字符時
When the focus is in the Code Editor: 焦點在編輯器內時
codeExample: "# 定義函數為 API 接口\n@DFF.API('API 名稱')\ndef hello_world():\n    # 從連接器查詢數據\n    db = DFF.CONN('db')\n    db.query('SELECT * FROM table LIMIT 3', database='my_database')\n\n    # 使用環境變量\n    company_name = DFF.ENV('my_env')\n\n    # 日誌輸出\n    DFF.log('Hello, world!')\n    print('Hello, world')\n\n    # 數據返回\n    ret = {\n      'msg': 'Hello, world'\n    }\n    return ret"
</i18n>
<i18n locale="zh-TW" lang="yaml">
API authentication for Sync and Async APIs: 用於同步和非同步 API 的認證
Add selection to next find match: 將下一個查詢匹配項新增到選擇
Allow Python functions be called as asynchronous HTTP APIs: 允許 Python 函式作為非同步 HTTP API 呼叫
Allow Python functions be called as synchronous HTTP APIs: 允許 Python 函式作為同步 HTTP API 呼叫
Auto-completion: 自動補全
Before you start, please read the following: 在開始之前，請閱讀以下內容
Built-in Features: 內建功能
Calling Python functions at regular intervals: 定時呼叫 Python 函式
Code Editor: 程式碼編輯器
Copy whole line: 複製整行
Cut whole line: 剪下整行
? Distribute and share code by publishing and installing Script Sets using git repositories, Alibaba Cloud OSS, file services etc.
: 使用 git 庫、阿里雲 OSS、檔案服務等進行指令碼集的釋出、安裝，實現程式碼的分發和共享。
Edit and manage Script Sets and Scripts: 進行指令碼集和指令碼的編輯和管理
Every tab supports quick jumping. Enter ID or name and select it to jump to the item.: 每個標籤頁都支援快速跳轉。輸入目標 ID 或名稱並選擇，即可定位到專案。
Export Script Sets as zip files: 將指令碼集匯出為 zip 檔案
Features built on the Script are located in the management page.: 建立在指令碼之上的各項功能位於管理頁面。
Import Script Sets from zip files: 從 zip 檔案匯入將指令碼集
'In the left sidebar you can find the core module entrance of the Editor:': 在左邊側欄可以找到編輯器的核心模組入口：
Indent lines: 增加行縮排
Information about the item and the actions that can be performed will be displayed after hovering over it.: 將滑鼠懸停在專案上，可展示專案的相關資訊以及可進行的操作。
Left Sidebar: 編輯器左側欄
Manage the environment variables available within the Script: 管理指令碼內可用的環境變數
Manage the users who use the system: 管理使用本系統的使用者
Manage the various external systems available within the Script: 管理指令碼內可用的各外部系統
Open search bar: 開啟搜尋欄
Outdent lines: 減少行縮排
Prompt when typing: 鍵入時提示
Recover Script Lib to a previous moment: 將指令碼庫恢復到以前的某個時刻
Select the Script in the left sidebar to enter the Code Editor.: 在左邊側欄中選擇指令碼進入此指令碼的程式碼編輯器
Some built-in objects are pre-injected into the context of the Script and can be accessed directly without importing.: 指令碼的上下文環境預先注入了一些內建物件，無需匯入即可直接使用。
Some customization setting for the system: 一些定製化設定
Some key operation records: 一些關鍵操作記錄
System version and status: 系統版本和狀態
'The common shortcuts for the Code Editor are similar to Sublime Text:': 程式碼編輯器的基本快捷鍵與 Sublime Text 類似：
The gray divider between the left sidebar and the editing area can be dragged to adjust the left sidebar width.: 拖動左側欄與編輯區的灰色分割線，可以調整左側欄寬度。
Toggle comments: 註釋/取消註釋
Toggling experimental features: 開啟 / 關閉實驗性功能
Usage overview: 使用概況
Welcome: 歡迎
When multiple lines are selected: 選中多行時
When no characters are selected: 未選中字元時
When the focus is in the Code Editor: 焦點在編輯器內時
codeExample: "# 定義函式為 API 介面\n@DFF.API('API 名稱')\ndef hello_world():\n    # 從聯結器查詢資料\n    db = DFF.CONN('db')\n    db.query('SELECT * FROM table LIMIT 3', database='my_database')\n\n    # 使用環境變數\n    company_name = DFF.ENV('my_env')\n\n    # 日誌輸出\n    DFF.log('Hello, world!')\n    print('Hello, world')\n\n    # 資料返回\n    ret = {\n      'msg': 'Hello, world'\n    }\n    return ret"
</i18n>
<!-- Generated by OpenCC END -->

<template>
  <transition name="fade">
    <el-container direction="vertical" v-show="$store.state.isLoaded">
      <!-- Header area -->
      <el-header height="60px">
        <h1>{{ $t('Welcome') }}</h1>
      </el-header>

      <!-- Main content -->
      <el-main>
        <div class="intro-content">
          <InfoBlock type="warning" :title="$t('Before you start, please read the following')" />

          <!-- Editor left sidebar -->
          <el-divider content-position="left"><h1>{{ $t('Left Sidebar') }}</h1></el-divider>
          <p>
            {{ $t('In the left sidebar you can find the core module entrance of the Editor:') }}
            <table class="intro-feature-table">
              <tbody>
                <tr>
                  <td>{{ $t('Script Lib') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Edit and manage Script Sets and Scripts') }}</td>
                </tr>
                <tr>
                  <td>{{ $t('Connector') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Manage the various external systems available within the Script') }}</td>
                </tr>
                <tr>
                  <td>{{ $t('ENV') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Manage the environment variables available within the Script') }}</td>
                </tr>
              </tbody>
            </table>
          </p>
          <p>{{ $t('Every tab supports quick jumping. Enter ID or name and select it to jump to the item.') }}</p>
          <p>{{ $t('Information about the item and the actions that can be performed will be displayed after hovering over it.') }}</p>
          <p>{{ $t('The gray divider between the left sidebar and the editing area can be dragged to adjust the left sidebar width.') }}</p>

          <!-- Built-in features -->
          <el-divider content-position="left"><h1>{{ $t('Built-in Features') }}</h1></el-divider>
          <p>{{ $t('Some built-in objects are pre-injected into the context of the Script and can be accessed directly without importing.') }}</p>
          <div id="editorContainer_Intro" :style="$store.getters.codeMirrorSettings.style">
            <textarea id="editor_Intro">{{ $t('codeExample') }}</textarea>
          </div>

          <!-- Write code -->
          <el-divider content-position="left"><h1>{{ $t('Code Editor') }}</h1></el-divider>
          <p>
            {{ $t('Select the Script in the left sidebar to enter the Code Editor.') }}<br>
            {{ $t('The common shortcuts for the Code Editor are similar to Sublime Text:') }}
            <ul>
              <li>{{ $t('Prompt when typing') }} <i class="fa fa-fw fa-caret-right"></i> <kbd>Tab</kbd>{{ $t(':') }}{{ $t('Auto-completion') }}</li>
              <li><kbd>{{ T.getSuperKeyName() }}</kbd> + <kbd>/</kbd>{{ $t(':') }}{{ $t('Toggle comments') }}</li>
              <li><kbd>{{ T.getSuperKeyName() }}</kbd> + <kbd>D</kbd>{{ $t(':') }}{{ $t('Add selection to next find match') }}</li>
              <li>{{ $t('When no characters are selected') }} <i class="fa fa-fw fa-caret-right"></i> <kbd>{{ T.getSuperKeyName() }}</kbd> + <kbd>X</kbd>{{ $t(':') }}{{ $t('Cut whole line') }}</li>
              <li>{{ $t('When no characters are selected') }} <i class="fa fa-fw fa-caret-right"></i> <kbd>{{ T.getSuperKeyName() }}</kbd> + <kbd>C</kbd>{{ $t(':') }}{{ $t('Copy whole line') }}</li>
              <li><kbd>{{ T.getSuperKeyName() }}</kbd> + <kbd>]</kbd>{{ $t(':') }}{{ $t('Indent lines') }}</li>
              <li><kbd>{{ T.getSuperKeyName() }}</kbd> + <kbd>[</kbd>{{ $t(':') }}{{ $t('Outdent lines') }}</li>
              <li>{{ $t('When multiple lines are selected') }} <i class="fa fa-fw fa-caret-right"></i> <kbd>Tab</kbd>{{ $t(':') }}{{ $t('Indent lines') }}</li>
              <li>{{ $t('When multiple lines are selected') }} <i class="fa fa-fw fa-caret-right"></i> <kbd>{{ T.getShiftKeyName() }}</kbd> + <kbd>Tab</kbd>{{ $t(':') }}{{ $t('Outdent lines') }}</li>
              <li>{{ $t('When the focus is in the Code Editor') }} <i class="fa fa-fw fa-caret-right"></i> <kbd>{{ T.getSuperKeyName() }}</kbd> + <kbd>F</kbd>{{ $t(':') }}{{ $t('Open search bar') }}</li>
            </ul>
          </p>

          <!-- Management -->
          <el-divider content-position="left"><h1>{{ $t('Management') }}</h1></el-divider>
          <p>
            {{ $t('Features built on the Script are located in the management page.') }}
            <table class="intro-feature-table">
              <tbody>
                <tr>
                  <td><i class="fa fa-fw fa-dashboard"></i> {{ $t('Overview') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Usage overview') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-info-circle"></i> {{ $t('About') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('System version and status') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-lock"></i> {{ $t('API Auth') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('API authentication for Sync and Async APIs') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-link"></i> {{ $t('Sync API') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Allow Python functions be called as synchronous HTTP APIs') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-tasks"></i> {{ $t('Async API') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Allow Python functions be called as asynchronous HTTP APIs') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-clock-o"></i> {{ $t('Cron Job') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Calling Python functions at regular intervals') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-cloud-download"></i> {{ $t('Script Set Export') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Export Script Sets as zip files') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-cloud-upload"></i> {{ $t('Script Set Import') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Import Script Sets from zip files') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-history"></i> {{ $t('Script Lib Recover') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Recover Script Lib to a previous moment') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-users"></i> {{ $t('User Manage') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Manage the users who use the system') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-cog"></i> {{ $t('System Setting') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Some customization setting for the system') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-keyboard-o"></i> {{ $t('Operation Records') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Some key operation records') }}</td>
                </tr>
                <tr>
                  <td><i class="fa fa-fw fa-flask"></i> {{ $t('Experimental Features') }}</td>
                  <td><i class="fa fa-fw fa-long-arrow-right"></i></td>
                  <td>{{ $t('Toggling experimental features') }}</td>
                </tr>
              </tbody>
            </table>
          </p>

          <!-- Script Market -->
          <el-divider content-position="left"><h1>{{ $t('Script Market') }}</h1></el-divider>
          <p>
            {{ $t('Distribute and share code by publishing and installing Script Sets using git repositories, Alibaba Cloud OSS, file services etc.') }}
          </p>
          <el-image :src="img_introScriptMarket"></el-image>
        </div>
      </el-main>
    </el-container>
  </transition>
</template>

<script>
import img_introScriptMarket from '@/assets/img/intro-script-market.png'

export default {
  name: 'Intro',
  components: {
  },
  watch: {
    codeMirrorTheme(val) {
      this.codeMirror.setOption('theme', val);
    },
  },
  methods: {
    onCollapseChange(activeNames) {
      if (Array.isArray(activeNames) && activeNames.indexOf('engineBuiltinFunction') >= 0) {
        setImmediate(() => {
          // Load code
          if (this.codeMirror) {
            this.codeMirror.refresh();
          }
        });
      }
    },
  },
  computed: {
    IMAGES() {
      return {
        introImg_editorEntry,
        introImg_editorAside,
      }
    },
    codeMirrorTheme() {
      return this.T.getCodeMirrorThemeName();
    },

    featureNameWidth_leftSidebar() {
      switch(this.$store.getters.uiLocale) {
        case 'en':
          return '90px';

        case 'zh-CN':
        default:
          return '70px';
      }
    },
    featureNameWidth_management() {
      switch(this.$store.getters.uiLocale) {
        case 'en':
          return '200px';

        case 'zh-CN':
        default:
          return '130px';
      }
    },
  },
  props: {
  },
  data() {
    return {
      codeMirror: null,

      img_introScriptMarket: img_introScriptMarket,
    }
  },
  created() {
    this.$store.commit('updateLoadStatus', true);
  },
  mounted() {
    setImmediate(() => {
      // Init editor
      this.codeMirror = this.T.initCodeMirror('editor_Intro');
      this.codeMirror.setOption('theme', this.codeMirrorTheme);

      // Page scroll to top
      document.getElementsByTagName('main')[0].scrollTo(0,0);
    });
  },
  beforeDestroy() {
    this.T.destoryCodeMirror(this.codeMirror);
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.intro-content {
  width: 700px;
  padding-left: 20px;
}
span, p, ul li {
  color: grey;
  font-size: 16px;
  line-height: 28px;
}

.el-divider {
  margin-top: 60px;
}

.intro-feature-table {
  padding: 10px;
}
.intro-feature-table td {
  padding: 0 6px;
  vertical-align: baseline;
}
.intro-feature-table td:first-child {
  white-space: nowrap;
}
</style>

<style>
.intro-content .el-collapse-item__header {
  padding-top: 30px;
  font-size: 22px;
  font-style: italic;
}
.intro-img {
  display: block;
  padding: 15px 5px;
}
.intro-img img {
  box-shadow: 3px 3px 3px lightgrey;
  border: 1px solid whitesmoke;
}
#editorContainer_Intro .CodeMirror {
  height: auto;
}
</style>
